민트위키:문법 도움말 (r9 문단 편집)

현재 진행 중인 사용자 토론이 있습니다.
[오류!] 편집 권한이 부족합니다. 로그인된 사용자(이)여야 합니다. 해당 문서의 ACL 탭을 확인하시기 바랍니다.
편집 창에서만 노출 기능 예시입니다.(17번 문단 참고)
== 이미지 파일 ==
[include(틀:다른 뜻, other1=파일 업로드, rd1=민트위키:기능 도움말, paragraph1=5, other2=하이퍼링크에 이미지를 출력하는 방법, rd2=, rd2_1=민트위키:문법 도움말, paragraph2_1=3)]
[[민트위키:기능 도움말#s-4|파일 업로더]]를 통해 생성한 파일 문서의 이미지 파일을 문서 내에 출력할 수 있습니다. 또한 매개변수를 이용해 이미지의 속성을 지정할 수 있습니다. 문서 내에 출력된 이미지 파일은 해당 이미지 파일의 파일 문서로의 하이퍼링크 기능도 겸합니다.

외부 이미지를 업로드하지 않고 민트위키 문서 내에 출력하는 방법은 없습니다.

{{{#!wiki style="word-break: keep-all;"
이미지 파일을 삽입하는 기본 문법은 아래와 같습니다.
||<tablebgcolor=#fff,#2d2f34><rowbgcolor=#40E0D0><rowcolor=#fff><-2><width=10%> 유형 || 입력 || 비고 ||
||<-2> 기본 || {{{[[파일:example.png]]}}}[* 앞 또는 뒤에 공백을 넣은 {{{[[ 파일:example.png]]}}}, {{{[[파일:example.png ]]}}} 형식으로도 작동은 하지만 '''권장하지 않습니다.''' ] ||이미지를 문서에 직접 출력하지 않고 '''텍스트 하이퍼링크'''로 하고자 하는 경우, 맨 앞에 쌍점(:)을 붙여 {{{[[:파일:example.png]]}}}와 같이 작성합니다. ||
||<|2> 매개변수 포함 || 단일 || {{{[[파일:example.png|매개변수]]}}} ||{{{[[파일:example.png|width=숫자]]}}}와 같이 사용합니다.||
|| 중첩 || {{{[[파일:example.png|매개변수1&매개변수2&...]]}}} ||{{{[[파일:example.png|width=숫자&align=위치]]}}}와 같이 매개변수 사이에 앰퍼샌드(&) 구분자를 넣어 사용합니다.||}}}
매개변수의 종류와 사용법은 아래와 같습니다.
{{{#!wiki style="word-break: keep-all;"
||<tablebgcolor=#fff,#2d2f34><rowbgcolor=#40E0D0><rowcolor=#fff><-2> 유형 || 매개변수 || 비고 ||
||<|2> 픽셀 지정 || 너비 || {{{width=숫자}}} ||<|2>문서에 삽입된 이미지는 화면을 넘어가지 않는 한 원래 크기로 출력됩니다.[br][br]이미지의 크기를 높이(height) 변경으로 지정하는 것은 권장되지 않습니다. 되도록이면 너비(width) 변경으로 지정해 주세요.[br][br]{{{width}}} 변수와 {{{height}}} 변수를 동시에 사용하면 이미지 비율이 달라질 수 있습니다. 단, svg 파일은 비율이 달라지지 않습니다. [[https://namu.wiki/w/%EB%82%98%EB%AC%B4%EC%9C%84%ED%82%A4:%EC%97%B0%EC%8A%B5%EC%9E%A53?rev=3835|예시]]||
|| 높이 || {{{height=숫자}}} ||
||<|2> 비율 지정 || 너비 || {{{width=숫자%}}} ||<|2>사이트나 표의 고정폭 대비 이미지 파일의 너비나 높이의 비율을 지정합니다.[br][br]{{{#red '''주의'''}}}: {{{width=숫자%}}}만 삽입하는 경우에는 [[반응형 웹|사용자가 보고 있는 화면 폭에 대한 비율로 이미지가 출력되므로]] 임의의 사용자가 보기 좋은 적정 너비 선정이 어렵습니다. 표에 넣지 않고 단독으로 이미지 너비 지정을 할 경우 가능한 한 절대 수치를 이용해주세요.[br][br]표에 이미지를 추가하려는 경우에는 테이블 절대폭 문법[* [[#테이블의 크기와 색상|테이블의 크기와 색상]] 문단 참고.]과 함께 이미지 상대폭 문법을 사용하면 __설정한 테이블 절대폭에 대한__ 이미지 상대폭이 지정되므로 결과적으로 이미지 너비를 고정하는 효과를 얻을 수 있습니다.||
|| 높이 || {{{height=숫자%}}} ||
||<-2> 정렬 지정 || {{{align=위치}}} ||'위치'의 종류는 수평 정렬과 수직 정렬이 있으며, 각각 아래와 같이 세 종류가 있습니다.
왼쪽 정렬: {{{left}}} / 가운데 정렬: {{{center}}} 또는 {{{middle}}} / 오른쪽 정렬: {{{right}}}
||
||<-2> 배경색 지정 || {{{#!wiki style="word-break: break-all"
{{{bgcolor=#RRGGBB}}}}}} ||라이트 테마 또는 다크 테마를 고려해 투명한 값이 있는 파일의 배경색을 지정할 수 있습니다.||
||<-2> 라이트{{{#!html &#8203}}}/{{{#!html &#8203}}}다크 모드 지정 || {{{theme=상태}}} ||파일을 라이트 모드 또는 다크 모드에서만 출력되도록 지정할 수 있습니다. '상태'에는 다음과 같은 값을 입력하며, 지정하지 않으면 라이트 모드와 다크 모드 모두에서 표시됩니다.

 * 라이트 모드: {{{light}}}
 * 다크 모드: {{{dark}}}
||
||<-2> 모서리 곡률 지정 || {{{border-radius=픽셀}}} ||이미지 파일의 모서리 곡률을 지정할 수 있는 문법입니다. ||
||<-2> 픽셀화 || {{{rendering=pixelated}}} ||픽셀 이미지(화소의 수가 적은 이미지)를 확대하면 이미지가 흐리게 나오는데, 이를 선명하게 표시되게 해 줍니다. [[https://namu.wiki/w/%EB%82%98%EB%AC%B4%EC%9C%84%ED%82%A4:%EC%97%B0%EC%8A%B5%EC%9E%A53?rev=7523|예시]] ||}}}
모바일에선 최대로 보이게 하려고 PC에서 파일의 너비를 최대로 하거나, PC에서 파일의 너비를 적절하게 설정했지만 모바일에선 가로로 슬라이드해서 이미지를 봐야 하는 상황을 막기 위해 다음과 같이 할 수 있습니다.
{{{||<width=숫자>[[파일:example.png|width=100%]]||
}}}
이렇게 하면 PC에선 적절한 너비로 볼 수 있고, 모바일에선 화면 크기에 맞춘 이미지를 볼 수 있으며, 아래에 이미지가 있다면 적절한 간격으로 떨어지는 효과를 볼 수 있습니다. 추가로 {{{<tablealign=center / right>}}}를 사용해 이미지의 위치도 지정할 수 있게 됩니다. 틀의 배경이 불편하다면 다음과 같이 사용할 수 있습니다.
{{{||<width=숫자><nopad>[[파일:example.png|width=100%]]||
}}}이렇게 하면 틀의 배경이 보이지 않으면서 위의 효과들을 볼 수 있고, {{{<tablebordercolor=색깔>}}}을 이용한다면 적절한 테두리 색까지 입힐 수 있게 됩니다.

[각주]
im preview